<template>
  <div id="app">
    <div class='qualityManual-container'>
        <div>
          <button style='width: 120px;' type='primary' @click='getFile'>测试预览office文档</button>
          <button style='width: 120px;' type='primary' @click='close'>关闭</button>
        </div>
        <div v-if='show' class='qualityManual-container-office'>
          <vab-only-office :option='option' />
        </div>
  </div>
  </div>
</template>

<script>
import vabOnlyOffice  from './VabOnlyOffice.vue'

export default {
  name: 'App',
  components: {
    vabOnlyOffice
  },
  data() {
      return {
        //参考vabOnlyOffice组件参数配置
        option: {
          url: '',
          isEdit: '',
          fileType: '',
          title: '',
          lang: '',
          isPrint: '',
		  editUrl:'',
          user: { name:''}
        },
        show: false,
      }
    },
    methods: {
      getFile() {
        this.show = true
        // getAction('/file/selectById', { id: this.id }).then(res => {
        this.option.isEdit = true
        this.option.lang = 'zh-CN'
        this.option.url = this.getImgUrl("123.docx")
		this.option.editUrl='https://dz.shopec.com.cn/client-api-prod/api/home/clientStoreInfo'
        this.option.title = '123'
        this.option.fileType = 'docx'
        this.option.isPrint = true

		var usr=this.$store.state.user
        this.option.user= { name:usr.name}
        // })
      },
      close() {
        this.show = false
      },
    },
}
</script>

<style>
html,body{
  height:100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height:100%;

}
.qualityManual-container {
    padding: 0 !important;
    height:100%;
  }
  .qualityManual-container-office {
      width: 100%;
      height: calc(100% - 55px);
    }
</style>

